<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单项管理 - ERP系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>ERP系统 - 订单项管理</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="supplier.html">供应商管理</a></li>
                <li><a href="product.html">商品管理</a></li>
                <li><a href="order.html">订单管理</a></li>
                <li><a href="#order-item-list">订单项列表</a></li>
                <li><a href="#create-order-item">创建订单项</a></li>
            </ul>
        </nav>
        
        <main>
            <section id="order-item-list">
                <h2>订单项列表</h2>
                <div class="toolbar">
                    <button id="refresh-btn">刷新</button>
                </div>
                <table id="order-items-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>订单ID</th>
                            <th>商品ID</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>小计</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 订单项数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </section>
            
            <section id="create-order-item" class="hidden">
                <h2>创建订单项</h2>
                <form id="create-order-item-form">
                    <div class="form-group">
                        <label for="order-id">订单ID:</label>
                        <input type="number" id="order-id" name="orderId" required>
                    </div>
                    <div class="form-group">
                        <label for="product-id">商品ID:</label>
                        <input type="number" id="product-id" name="productId" required>
                    </div>
                    <div class="form-group">
                        <label for="quantity">数量:</label>
                        <input type="number" id="quantity" name="quantity" required>
                    </div>
                    <div class="form-group">
                        <label for="unit-price">单价:</label>
                        <input type="number" step="0.01" id="unit-price" name="unitPrice" required>
                    </div>
                    <button type="submit">创建订单项</button>
                </form>
            </section>
            
            <section id="edit-order-item" class="hidden">
                <h2>编辑订单项</h2>
                <form id="edit-order-item-form">
                    <input type="hidden" id="edit-order-item-id" name="id">
                    <div class="form-group">
                        <label for="edit-order-id">订单ID:</label>
                        <input type="number" id="edit-order-id" name="orderId" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-product-id">商品ID:</label>
                        <input type="number" id="edit-product-id" name="productId" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-quantity">数量:</label>
                        <input type="number" id="edit-quantity" name="quantity" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-unit-price">单价:</label>
                        <input type="number" step="0.01" id="edit-unit-price" name="unitPrice" required>
                    </div>
                    <button type="submit">更新订单项</button>
                    <button type="button" id="cancel-edit">取消</button>
                </form>
            </section>
            
            <section id="order-item-details" class="hidden">
                <h2>订单项详情</h2>
                <div class="order-item-info">
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">ID:</span>
                            <span id="detail-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">订单ID:</span>
                            <span id="detail-order-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">商品ID:</span>
                            <span id="detail-product-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">数量:</span>
                            <span id="detail-quantity"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">单价:</span>
                            <span id="detail-unit-price"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">小计:</span>
                            <span id="detail-subtotal"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">创建时间:</span>
                            <span id="detail-created-time"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">更新时间:</span>
                            <span id="detail-updated-time"></span>
                        </div>
                    </div>
                    <div class="order-item-actions">
                        <button id="edit-order-item-btn" class="btn btn-primary">编辑</button>
                        <button id="delete-order-item-btn" class="btn btn-danger">删除</button>
                        <button id="back-btn" class="btn">返回</button>
                    </div>
                </div>
            </section>
        </main>
    </div>
    
    <script src="js/order-item.js"></script>
</body>
</html>